<template>
  <div>
    <el-button size="mini" type="prymary" @click="toPath('./')">首页</el-button>
    <h1>axios请求数据页面</h1>
    <button @click="fetchData1">请求数据1</button>
    <button @click="fetchData2">请求数据2</button>
    <button @click="fetchData3">请求数据3</button>
    <div v-if="loading">加载中...</div>
    <div v-if="error">{{ error }}</div>
    <div v-if="data">
      <pre>{{ data }}</pre>
    </div>
  </div>
</template>

<script>
import requst from "@/utils/requst";
export default {
  data() {
    return {
      loading: false,
      error: null,
      data: null,
    };
  },
  methods: {
    toPath(path) {
      this.$router.push(path);
    },
    async fetchData1() {
      await this.fetchData("/api/seller");
    },
    async fetchData2() {
      await this.fetchData("/api/map");
    },
    async fetchData3() {
      await this.fetchData("/api/rank");
    },
    async fetchData(url) {
      this.loading = true;
      this.error = null;
      this.data = null;
      try {
        const response = await requst.get(url);
        this.data = response;
      } catch (err) {
        this.error = "请求失败，请稍后重试";
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style scoped>
button {
  margin: 10px;
  padding: 10px 20px;
  font-size: 16px;
}
</style>
